<template>
	<view class="wrap u-rela">
		<template v-if="Object.keys(goods).length">
			<!-- 商品信息展示 -->
				<view class="goods-show ">
					<!-- 图片展示 -->
					<view class="u-text-center">
						<image  mode="heightFix" :src=" goods.img ? vuex_user.store + goods.img : null"></image>
					</view>
					<view class="u-p-20">
						<!-- 商品基本信息 -->
						<view class="base-info u-m-b-50">
							<text class="title u-font-40">{{goods.name}}</text>
							<view class="u-flex u-row-between u-m-t-20 u-m-b-20">
								<text class="price u-font-32">￥{{goods.price}}</text>
								<text class="small">库存:{{goods.count}}</text>
								<text class="small">销量:{{goods.saleCount}}</text>
							</view>
						</view>
						<!-- tabs组件 -->
						<u-tabs class="u-m-b-50"  :list="tabsList" :is-scroll="false" :current="tabsCurrent" @change="tabsChange" active-color="#fa3534" inactive-color="#dd6161"></u-tabs>
						<view class="bookInfo">
							<!-- 商品详情区 -->
							<template v-if="tabsCurrent==0">
								<view class="">
									
									
									<view class="u-flex u-m-t-20 u-text-center " style="color: #909399;" v-if="goods.author != '' || goods.spec!=''">
										<view class="u-flex-4" v-if="goods.author != ''">作者: <view style="color: #303133;">{{goods.author}}</view></view>
										<view class="u-flex-5" v-if="goods.spec != ''">图书规格: <view style="color: #303133;">{{goods.spec}}</view></view>
										
										
									</view>
									
									<view class="u-flex u-m-t-20 u-text-center" style="color: #909399;" v-if="goods.sheet != '' || goods.edition!=''">
										<view class="u-flex-4 "v-if="goods.sheet != ''">开本: <view style="color: #303133;">{{goods.sheet}}</view></view>
										<view class="u-flex-5" v-if="goods.edition != ''">版次: <view style="color: #303133;">{{goods.edition}}</view></view>
										
									</view>
									<view class="u-flex u-m-t-20 u-text-center u-m-b-20" style="color: #909399;" v-if="goods.binding != '' || goods.isbn!=''">
										<view class="u-flex-4" v-if="goods.binding != ''">装订: <view style="color: #303133;">{{goods.binding}}</view></view>
										<view class="u-flex-5" v-if="goods.isbn != ''">ISBN: <view style="color: #303133;">{{goods.isbn}}</view></view>
										
									</view>
								</view>
								
								<u-parse :html="goods.description"></u-parse>
							</template>
							<!-- 商品评论区 -->
							<template v-if="tabsCurrent==1">
								<template v-if="commentList.length>0">
									<view class="comment" v-for="(res, index) in commentList" :key="index">
										<view class="left">
											<image :src=" res.user.headImg" mode="aspectFill"></image>
										</view>
										<view class="right">
											<view class="top">
												<view class="name">
													{{ res.user.nickName }}
													<u-tag class="u-m-l-20"  shape="circleRight"  v-show="res.isMe  == true" text="你的评价" type="primary" size="mini" mode="dark" />
												</view>
												
											</view>
											<view class="content">{{ res.content }}</view>
											<view>
												<u-rate :count="5" v-model="res.star" :disabled="true"></u-rate>
											</view>
											<view class="bottom">
												
												
												<view>
													{{ res.createdTime | formatDate}}
												</view>
												
											</view>
										</view>
									</view>
								</template>
								<template v-else>
									<!-- 评论为空 -->
									<u-empty text="暂无评论" src="order"></u-empty>
								</template>
							</template>
							<!-- 附件下载 -->
							<template v-if="tabsCurrent==2">
								<view v-if="audioCount>0 || fileCount>0">
									<view class="u-m-t-20" v-show="fileCount>0">
										<view class="u-flex u-row-between">
											<view class="fontStyle">课件资源共{{fileCount}}个</view>
											<view>
												<u-button type="error" size="mini" @click="toFile">查看资源</u-button>
											</view>
										</view>
										
									</view>
									
									<view class="u-m-t-80" v-show="audioCount>0">
									
										<view class="u-flex u-row-between">
											<view class="fontStyle">在线音频共{{audioCount}}个</view>
											<view>
												<u-button type="error" size="mini" @click="toAudio">查看音频</u-button>
											</view>
										</view>
										
									</view>
								</view>
								<view v-else>
									<template>
										<!-- 资源为空 -->
										<u-empty text="暂无附件" src="list"></u-empty>
									</template>
								</view>
							</template>
						</view>
					</view>
				</view>
				<!-- 提交订单栏 -->
				<view class="navigation">
					<view class="left">
						<view class="item" @tap="collect" style="text-align: center;">
							<u-icon v-if="!collectNum" name="star" :size="40" :color="$u.color['contentColor']"></u-icon>
							<u-icon v-else name="star-fill" :size="40" color="#fa3534"></u-icon>
							<view class="text u-line-1">{{collectNum?"已收藏":"收藏"}}</view>
						</view>
						<view class="item" @tap="toCart">
							<u-badge :count="'+'+cartNum" bgColor="#fa3534" :is-center="true"></u-badge>
							<u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']"></u-icon>
							<view class="text u-line-1">购物车</view>
						</view>
					</view>
					<view class="right">
						<block v-if="!goods.count">
							<u-button :disabled="true" class="cart btn"  type="error">没有库存啦~</u-button>
						</block>
						<block v-else>
							<u-button class="cart btn" @click="showPopup(1)" :ripple="true" type="warning" shape="circle">加入购物车</u-button>
							<u-button class="cart btn" @click="showPopup(2)" :ripple="true" type="error" shape="circle">购买</u-button>
						</block>
						
					</view>
				</view>
				<u-popup v-model="popupShow" mode="bottom" border-radius="20" length="60%" :closeable="true" >
					<view class="popupView u-flex"  >
						<view class="u-flex-4">
							<u-image :src=" goods.img ? vuex_user.store + goods.img : null" width="100%" height="300rpx"></u-image>
							
						</view>
						<view class="u-flex-6 u-m-t-80">
							<view style="color: #fa3534;font-size: 40rpx;font-weight: bolder;"><text style="font-size: 28rpx;">￥</text>{{goods.price}}</view>
							<view style="color: #909399;font-size: 30rpx;"><text style="font-size: 28rpx;">库存:</text>  {{goods.count}}</view>
						</view>
					</view>
					<view>
						<u-button type="warning" shape="circle" :plain="true" :disabled="true">{{goods.name}}</u-button>
					</view>
					<view class="u-flex u-row-between u-m-t-80">
						<view style="font-weight: bolder;">数量</view>
						<view>
							<u-number-box v-model="userBuyCount" @change="valChange" :min="1" :max="goods.count" :index="goods.id"></u-number-box>
						</view>
					</view>
					<view class="u-m-t-80">
						<u-button type="error" shape="circle" @click="addCart" >{{btnText}}</u-button>
					</view>
				</u-popup>
		</template>
		<template v-else>
			<view class="loading">
				<u-loading size="40" color="#2979ff"></u-loading>
				<view>
					<text class="small">拼命加载中~</text>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 商品基本信息
				goods: {
					id:'',
					name: '',
					sales:'',
					count:'',
					price:'',
					img:'',
				},
				// 推荐商品
				likeGoods: {},
				tabsList: [{
					name: '商品详情'
				}, {
					name: '商品评论',
					count:0
				},
				{
					name: '书籍附件'
				},
				],
				tabsCurrent: 0,
				commentList: [],
				goodsId: null,
				collectNum:false,
				cartNum:0,
				popupShow:false,
				userBuyCount:1,
				audioCount:0,
				fileCount:0,
				btnText:'购买'
			}
		},
		onLoad(option) {
			
			this.goodsId = option.id
			// 获取商品基本信息
			this.getBaseInfo()
			// 获取购物车商品数量
			// this.cartLen()
		},
		methods: {
			toFile(){
				if(!this.$u.utils.isLogin()){
					this.$u.toast("查看资源请先登录")
					return}// 如果没有登录先去登录
				this.$u.route({
					url:'/pages/pptres/pptShow',
					params: {
						id:this.goods.id
					}
				})
			},
			toAudio(){
				this.$u.route({
					url:'/pages/audio/show',
					params: {
						id:this.goods.id
					}
				})
			},
			valChange(e){
				
				if(e.value==this.goods.count){
					this.$u.toast("不能超过库存哟~");
				}
				this.userBuyCount = e.value
			},
			
			// 获取商品信息接口
			async getBaseInfo(){
				if(this.goodsId != null){
					const res = await this.$u.api.booksInfo(this.goodsId)
					console.log(res)
					
					// 商品基本信息
					this.goods = res.book
					this.fileCount = res.normal.length
					this.audioCount = res.audios.length - res.normal.length
					if(!this.$u.test.isEmpty(this.goods.spec) && this.goods.spec.indexOf("mm") < 0){
						this.goods.spec = this.goods.spec + "mm"
					}
					// 是否收藏
					if(!this.$u.test.isEmpty(this.vuex_token)){
						const judge = await this.$u.api.judgeIsCollect(this.goodsId)
						this.collectNum = judge 
					}
					
					// console.log(judge)
					
					// 商品评论
					const params = {
						bid:this.goodsId,
						pageSize:100
					}
					const comment =await this.$u.api.getComment(params)
					console.log(comment)
					if(comment != null){
						this.commentList=comment.list
						this.tabsList[1].count=comment.list.length
					}
					if(this.commentList != null && !this.$u.test.isEmpty( this.vuex_user.headImg)){
						for(let i = 0 ; i < this.commentList.length ; i++){
							
							if(this.commentList[i].user.headImg == this.vuex_user.headImg){
								
								this.commentList[i].isMe = true
							}
						}
					}
					console.log(this.commentList)
					// // 推荐商品
					// this.likeGoods = res.like_goods
				}
				
			},
			
			// 切换tabs
			tabsChange(index) {
				this.tabsCurrent = index
				//切换到评论 去获取评论
				// if(this.tabsCurrent == 1){
					
				// }
			},
			// 收藏节流
			collect(){
				this.$u.throttle(this.collectNot,1500)
			},
			// 收藏和取消收藏
			async collectNot(){
				if(!this.$u.utils.isLogin()){}// 如果没有登录先去登录
				else{
					const params = {
						bid: this.goodsId
					}
					
					// 收藏和取消收藏提示
					if(this.collectNum == true){
						// 取消收藏
						const res = await this.$u.api.delCollectByBid(params)
						this.$u.toast("取消收藏成功")
					}else{
						//请求添加收藏
						
						await this.$u.api.addCollect(params)
						this.$u.toast("收藏成功")
					}
					this.collectNum=!this.collectNum
				}
			},
			//添加购物车
			async addCart(){
				//添加购物车
				if(this.btnText == '加入购物车'){
					const params ={
						bid:this.goods.id,
						count:this.userBuyCount,
					}
					const res = await this.$u.api.addCart(params)
					if(res == null){
						this.$u.toast("添加购物车成功！")
						this.popupShow = false
						this.cartNum++
						
					}
				}else{
					//直接购买
					const params ={
						bid:this.goods.id,
						count:this.userBuyCount,
					}
					this.$u.route({
						url:'/pages/order/order',
						params
					})
				}
				
				
			},
			// 显示添加购物车弹窗(自带节流效果)
			async showPopup(val){
				if(!this.$u.utils.isLogin()){}// 如果没有登录先去登录
				else{
					if(val==1){
						this.btnText = '加入购物车'
					}else{
						this.btnText = '购买'
					}
					this.popupShow = true
				}
			},
			async cartLen(){
				// 如果登录成功在调用这个接口
				if(this.vuex_token){
					// 获取购物车商品数量
					const res=await this.$u.api.cartGoods()
					// 累加总的商品数量
					this.cartNum=res.data.reduce((pre,item)=>{
						 return parseInt(pre) + parseInt(item.num);
					},0)
				}
			},
			/* 跳转到购物车页面 */
			toCart(){
				if(!this.$u.utils.isLogin()){}
				else{
					this.$u.route({type:'switchTab',url:'pages/cart/cart'})
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	.fontStyle{
		color: #dd6161;
		font-weight: bolder;
		font-size: 35rpx;
	}
	.wrap {
		height: 90vh;
		.loading{
			text-align: center;
			position: absolute;
			top: 50%;
			left:50%;
			transform:translate(-50%,-50%);
		}
		.goods-show {
			.base-info {
				.title,
				.price {
					font-weight: bolder;
				}

				.price {
					color: rgb(209, 45, 58);
				}
			}

			.comment {
				display: flex;
				padding: 30rpx;

				.left {
					image {
						width: 64rpx;
						height: 64rpx;
						border-radius: 50%;
						background-color: #f2f2f2;
					}
				}

				.right {
					flex: 1;
					padding-left: 20rpx;
					font-size: 30rpx;

					.top {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 10rpx;

						.name {
							color: #fa3534;
						}

						.like {
							display: flex;
							align-items: center;
							color: #9a9a9a;
							font-size: 26rpx;

							.num {
								margin-right: 4rpx;
								color: #9a9a9a;
							}
						}

						.highlight {
							color: #fa3534;

							.num {
								color: #fa3534;
							}
						}
					}

					.content {
						margin-bottom: 10rpx;
					}

					.reply-box {
						background-color: rgb(242, 242, 242);
						border-radius: 12rpx;
						text-indent: 1em;
						.item {
							padding: 20rpx;
							border-bottom: solid 2rpx $u-border-color;

							.username {
								font-size: 24rpx;
								color: #999999;
							}
						}

						.all-reply {
							padding: 20rpx;
							display: flex;
							color: #fa3534;
							align-items: center;

							.more {
								margin-left: 6rpx;
							}
						}
					}

					.bottom {
						margin-top: 20rpx;
						display: flex;
						font-size: 24rpx;
						color: #9a9a9a;

						.reply {
							color: #fa3534;
							margin-left: 10rpx;
						}
					}
				}
			}
		}

		// min-height: 100vh;
		.navigation {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			border: solid 2rpx #f2f2f2;
			background-color: #ffffff;
			padding: 16rpx 0;
			justify-content: space-between;
			.left {
				flex:3;
				display: flex;
				font-size: 20rpx;
				justify-content: space-around;
				.item {
					position: relative;
					text-align: center;
				}
			}

			.right {
				flex:9;
				display: flex;
				font-size: 28rpx;
				justify-content: flex-end;
				align-items: center;
				.btn {
					text-align: center;
					line-height: 66rpx;
					width: 90%;
					
					color: #ffffff;
				}

				.cart {
					
					margin-right: 30rpx;
				}

				.buy {
					background-color: #ff7900;
				}
			}
		}
	}
	.bookInfo{
		padding-bottom: 120rpx;
	}
	.popupView{
		margin: 60rpx 40rpx;
		
	}
</style>
